<template>
  <div class="i-table-no-border">
    <!-- <div>
      <table-btns
        :tableTopOperateData="listData.tableTopOperate"
        :tableTopBatchOperate="listData.tableTopBatchOperate"
        :selectedData="selectedData"
        :requestApi="listData.requestApi"
        :basePath="basePath"
        @exportData="exportData"
        @actionsChange="getData"
      >
      </table-btns>
    </div> -->
    <!-- 按钮操作栏 -->
    <BtnRender :render="renderBtnsBar" />
    <!-- 表格内容 start  -->
    <Table
      ref="table"
      :columns="columns"
      :data="tableDataList"
      :loading="loading"
      class="ivu-mt"
      height="500"
      stripe
      @on-filter-change="handleFilterChange"
      @on-select="handleSelect"
      @on-select-cancel="handleSelectCancel"
      @on-select-all="handleSelectAll"
      @on-select-all-cancel="handleSelectAllCancel"
    >
      <template slot-scope="{ row }" slot="categoryProductType">
        <span v-if="row.categoryProductType === '1'">危化品</span>
        <span v-if="row.categoryProductType === '2'">管制刀具</span>
        <span v-if="row.categoryProductType === '3'">非限制</span>
      </template>
      <template slot-scope="{ row }" slot="categoryType">
        <span v-if="row.categoryType === '1'">产品使用</span>
        <span v-if="row.categoryType === '2'">供应商使用</span>
        <span v-if="row.categoryType === '3'">产品/供应商共用</span>
      </template>
      <template slot-scope="{ row }" slot="isPriceSensitive">
        <span v-if="row.isPriceSensitive === '1'">是</span>
        <span v-if="row.isPriceSensitive === '2'">否</span>
      </template>
      <template slot-scope="{ row }" slot="isMetal">
        <span v-if="row.isMetal === '1'">是</span>
        <span v-if="row.isMetal === '2'">否</span>
      </template>
      <template slot-scope="{ row }" slot="state">
        <span v-if="row.state === '1'">启用</span>
        <span v-if="row.state === '2'">未启用</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <table-actions
          :requestApi="listData.requestApi"
          :basePath="basePath"
          :rowData="row"
          :indexData="index"
          @actionsChange="getData"
        ></table-actions>
      </template>
    </Table>
    <!-- 表格内容 end  -->
    <!-- 分页 start  -->
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="totalNum"
        show-total
        show-sizer
        transfer
        :current.sync="nowPage"
        @on-change="getData"
        @on-page-size-change="handleChangePage"
      />
    </div>
    <!-- 分页 end  -->
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import util from '@/libs/util';
import { ApiRequest } from '@api/basePage';
import tables from '@/mixins/dynamictable'; // 混入通用代码
import qwInput from '@/components/common/formItem/qwInput'; // 表单input组件
import qwSelect from '@/components/common/formItem/qwSelect'; // 表单select组件
import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 表单日期组件
import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // 表单下拉树组件
import tableActions from './tableActions'; // 表格操作项
import tableBtns from './tableBtns'; // 表格内部操作按钮
import BtnRender from '@/components/JSXRender/BtnRender';
import { getBtnsBar } from '@/utils/getBtnsRender';
import { createExcelByExport, generateUuid, setAuthBtnId } from '@/utils/bizUtils';
import { exportCategoryListService, exportTemplateService } from '@/api/basics/categoryManage/categoryManage';
export default {
  mixins: [tables],
  props: {
    dynamicData: {
      type: Object
    },
    pagePath: {
      type: String
    }
  },
  computed: {
    ...mapState('admin/baseList', [
      'listData',
      'searchFormData',
      'searchFormDataQ'
    ]),
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  components: {
    qwInput,
    qwSelect,
    qwDatePicker,
    qwSelectTree,
    tableActions,
    tableBtns,
    BtnRender
  },
  data () {
    return {
      util: util,
      basePath: this.dynamicData.basePath, // 拼接基础路径
      btnLoading: {
        export: false, // 导出loading
        exportTemp: false // 导出模板loading
      }
    };
  },
  created () {},
  methods: {
    ...mapMutations('admin/baseList', ['setTableRowData']),
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      // 批量启用按钮栏
      const btnsBar = [
        {
          label: '新增',
          method: this.handleAdd,
          icon: 'el-icon-plus'
        },
        {
          label: '导出',
          method: this.handleExport,
          icon: 'el-icon-download',
          loading: this.btnLoading.export
        },
        {
          label: '品类导出模板',
          method: this.handleExportTemp,
          icon: 'el-icon-download',
          loading: this.btnLoading.exportTemp,
          authLabel: '导出'
        }
      ];
      // 按钮通用属性填充
      const finalBars = btnsBar.map(item => ({
        ...item, type: 'primary', size: 'mini', hasAuth: true
      }));
      return getBtnsBar(h, finalBars, this.showBtn, 'start');
    },
    // 新增
    handleAdd () {
      setAuthBtnId('新增');
      this.$router.push({ name: 'categoryAdd' });
    },
    // 导出
    async handleExport () {
      setAuthBtnId('导出');
      const searchParam = this.getSearchParam();
      const data = { searchParam: JSON.stringify(searchParam) }
      const loadingFn = state => { this.btnLoading.export = state };
      const res = await exportCategoryListService(data, loadingFn);
      createExcelByExport({ res, excelTitle: `后台品类表_${generateUuid()}` });
    },
    // 品类导出模板
    async handleExportTemp () {
      setAuthBtnId('导出');
      const loadingFn = state => { this.btnLoading.exportTemp = state };
      const res = await exportTemplateService({}, loadingFn);
      createExcelByExport({ res, excelTitle: `品类导出模板_${generateUuid()}` });
    },
    // 获取searchParam
    getSearchParam () {
      let searchParam = [];
      Object.keys(this.searchFormData).forEach(key => {
        searchParam.push({
          name: key,
          value: this.searchFormData[key]
        });
      });
      Object.keys(this.searchFormDataQ).forEach(key => {
        searchParam.push({
          name: key,
          value: this.searchFormDataQ[key]
        });
      });
      return searchParam;
    },
    // 获取表格的数据
    getData () {
      this.selectedData = [];
      let searchParam = this.getSearchParam();
      searchParam.push({ name: 'reviewState', value: '2' });
      searchParam.push({ name: 'reviewState_q', value: 'EQ' });
      let data = {
        nowPage: this.nowPage,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam)
      };

      this.loading = true;
      // 开始请求列表
      ApiRequest(
        this.listData.requestApi.getTableList.url,
        this.listData.requestApi.getTableList.type,
        data
      ).then(res => {
        let rData = res;
        this.selectedData = [];
        if (rData.retData !== '') {
          rData.retData = rData.retData;
        }

        let tableDataList = rData.retData.results;
        tableDataList.forEach(item => {
          let actions = [];
          if (item.canUpdate === '1') {
            actions.push({
              name: 'Edit',
              label: '编辑',
              handleType: 'link'
            });
          }
          actions.push({
            name: 'View',
            label: '查看历史',
            handleType: 'link'
          });
          // TODO 跟产品沟通暂时注掉此按钮
          // if (item.levelNum === '4') {
          //   actions.push({
          //     name: 'Copy',
          //     label: '复制',
          //     handleType: 'link'
          //   });
          // }
          // actions.push({
          //     name: 'Delete',
          //     label: '删除',
          //     handleType: 'link'
          // })
          item.actions = actions;
        });
        // 增加表格操作项
        this.tableDataList = rData.retData.results;
        this.totalNum = rData.retData.totalNum;
        this.loading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.i-table-no-border .ivu-table-header th {
  background: #f8f8f8;
}
.height30 {
  height: 30px;
  line-height: 30px;
}
</style>
